Diese Navigationsleiste verläuft horizontal zwischen einem Bannerbereich und dem Inhalt. Sie ist so aufgebaut, dass es zu jedem Hauptmenüpunkt einen oder mehrere Untermenüpunkte gibt. Die einzelnen Untermenüpunkte werden angezeigt, wenn den jeweiligen Hauptmenüpunkt hovert.
Das Menü ist so aufgebaut, dass sich bei einer geringeren Bildschirmauflösung die Form der Navigation ändert. Dadurch lasst sich diese Navigationleiste auch mit einem Smartphone gut bedienen.
Zusätzlich zur Ausgangsvariante der Navigation wurde beim :hover-Link eine kleine Grafik (ein Ferkelkopf) eingebaut.
Diese Navigationsleiste ist nur mit aktiviertem JavaScript voll funktionsfähig. Es ist eine höhere jQuery-Version erforderlich. Hier wird die in allen nPage-Seiten automatisch eingefügte jQuery-Version genutzt.
Die hier gezeigte Variante zeigt eine statische Navigation mit Dummy-Links. Parallel dazu habe ich eine Variante mit dynamischer Navigation auf der Basis von nPage Script erstellt.